import {message,Tabs,Form,Input,Select} from 'antd'
import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { queryDimissionAuditList, saveDimissionUpcoming } from './service'
import {connect} from 'umi'
import {auditResults} from '@/utils/constant'
import CreateForm from "./components/CreateForm";
import moment from "moment";

const  { TabPane } = Tabs;

const TableList = (props) => {
  const actionRef = useRef();
  const actionRef1 = useRef();
  const [current, setCurrent] = useState(null);
  const [visible,setVisible] = useState(false);
  const [operationFlag,setOperationFlag] = useState('');
  const [tabIndex, setTabIndex] = useState("0");
  const [loading,setLoading] = useState(false);
  const columns = [
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '公司名称',
      dataIndex: 'orgname',
    },
    {
      title: '部门名称',
      dataIndex: 'unitname',
    },
    {
      title: '岗位名称',
      dataIndex: 'jobname',
    },
    {
      title: '离职日期',
      dataIndex: 'dimissionTime',
      hideInSearch: true,
    },
    {
      title: '审计结果录入',
      dataIndex: 'auditStatus',
      hideInSearch: true,
      hideInTable: tabIndex==='0',
      render: (text) =>{
        return text!=='-' ? auditResults.find(item => item.value===text).label : text;
      }
    },
    {
      title: '审计说明',
      dataIndex: 'remark',
      hideInSearch: true,
      hideInTable: tabIndex==='0'
    },
    {
      title: '结果附件',
      dataIndex: 'annexUrlList',
      hideInSearch: true,
      hideInTable: tabIndex==='0',
      render: (fileUrls, record) =>(
          fileUrls.length>0 ? fileUrls.map((item,index) =>{
              return (
                <div key={index} ><a download href={item}>{item.split('----')[1]}</a></div>
              )
          }) :''
      )
    },
    {
      title: '审计结束日期',
      dataIndex: 'auditTime',
      hideInSearch: true,
      hideInTable: tabIndex==='0',
      render: (text) => {
        return text !== '-'  ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      hideInTable: tabIndex !== '0',
      hideInSearch: true,
      render: (item, record) => (
        <>
          {
            record.dimissionTime ?
              <a onClick={() => handleUpcoming('handle',record)}>办理</a> :
              <a onClick={() => handleUpcoming('save',record)}>办结确认</a>
          }
        </>
      )
    }
  ];

  const handleUpcoming = (flag,data) => {
    setVisible(true);
    setOperationFlag(flag);
    setCurrent(data);
  };

  const handleOk = async (values) => {
    setLoading(true);
    setCurrent(null);
    setVisible(false);
    if (operationFlag === 'save'){
      saveDimissionUpcoming(values).then(res => {
        if (res.flag){
          message.success('保存审计待办成功！');
        }else {
          message.error(res.error);
        }
        setLoading(false);
        actionRef.current.reload();
      })
    }else if (operationFlag === 'handle'){
      saveDimissionUpcoming({...values, status: '1'}).then(res => {
        if (res.flag){
          message.success('办理成功！');
        }else {
          message.error(res.error);
        }
        setLoading(false);
        actionRef.current.reload();
      })
    }
  };

  const handleCancel = () => {
    setCurrent(null);
    setVisible(false);
  };

  const handleChangTabIndex = (key) => {
    setTabIndex(key);
    if(key === '1'){
      actionRef1.current && actionRef1.current.reload()
    }else {
      actionRef.current && actionRef.current.reload();
    }
  };

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={handleChangTabIndex}>
        <TabPane tab="待办理" key="0">
          <ProTable
            actionRef={actionRef}
            loading={loading}
            rowKey="oid"
            request={(params) => queryDimissionAuditList(params,tabIndex)}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="已办理" key="1">
          <ProTable
            actionRef={actionRef1}
            rowKey="oid"
            request={(params) => queryDimissionAuditList(params,tabIndex)}
            columns={columns}
          />
        </TabPane>
      </Tabs>

      <CreateForm
        visible={visible}
        current={current}
        onSubmit={handleOk}
        onCancel={handleCancel}
      />

    </PageHeaderWrapper>
  )
}

export default TableList
